<!-- 省市区三级联动选择器 -->
<template>
  <div class="address-pick">
    <el-cascader
      @change="handleChange"
      size="large"
      :options="pcaTextArr"
      v-model="selectedOptions"
    >
    </el-cascader>
  </div>
</template>

<script setup>
/**
 *  使用方式:
 *  ① 安装依赖 npm install element-china-area-data -S
 *  ② 页面import对应的数据
 *  ③ 按下面的配置说明进行数据说明,在change事件的回调中处理选中的结果
 *  配置说明
 *  1.provinceAndCityData：省市二级联动数据,汉字+code
 *  2.regionData：省市区三级联动数据 code
 *  3.pcTextArr：省市联动数据，纯汉字
 *  4.pcaTextArr：省市区联动数据，纯汉字
 *  5.codeToText：是个大对象，属性是区域码，属性值是汉字 用法例如：codeToText['110000']输出北京市
 */
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
let selectedOptions = reactive([]);
const handleChange = (val) => {
  console.log("回调事件的值是:", val);
  console.log("1111", selectedOptions);
};
</script>
<style lang="scss" scoped></style>
